<template>
  <div class="shop" v-loading="loading" id="shopdetail">
    <div class="shop_info">
      <el-row>
        <el-col :span="12">
          <p class="shop_title">{{shopdetailData.shop_name}} / UID:{{shopdetailData.uid}}</p>
        </el-col>

        <el-col :span="12">
          <div class="shop_btns">
            <!-- <el-button type="size" @click="showcardRecord = true">绑定卡号段记录</el-button> -->
            <el-button type="size" @click="isShowShopStyle = true">店铺样式</el-button>
            <el-button type="size" @click="showPurseRecordList">红包充值记录</el-button>
            <el-button type="size" @click="changeShopcategory">查看入驻信息</el-button>
            <el-button type="primary" @click="showOrderType = true">查看订单</el-button>
          </div>
        </el-col>
      </el-row>

      <el-row class="info_detail">
        <el-col :span="4">
          <p>联系人: {{shopdetailData.contact}}</p>
        </el-col>
        <el-col :span="4">
          <p>联系电话: {{shopdetailData.phone}}</p>
        </el-col>

        <el-col :span="11">
          <span class="info_amount">已产生订单数</span>
        </el-col>
        <el-col :span="5">
          <span class="info_amount">已核销订单金额</span>
        </el-col>
      </el-row>

      <el-row class="info_detail">
        <el-col :span="4">
          <p v-if="shopdetailData.type_word">
            店铺分类: {{shopdetailData.type_word}}
            <!-- <strong class="changeCategory" @click="changeShopcategory">修改</strong> -->
          </p>
          <p v-else>
            店铺分类: ---
            <!-- <strong class="changeCategory" @click="changeShopcategory">修改</strong> -->
          </p>
        </el-col>
        <el-col :span="4">
          <p>
            店铺员工:
            <strong v-if="shopdetailData.shop_clerks">{{shopdetailData.shop_clerks}}人</strong>
            <strong v-else>0人</strong>
          </p>
        </el-col>

        <el-col :span="11">
          <span
            v-if="shopdetailData.order_count"
            class="info_detail_amount"
          >{{shopdetailData.order_count}}</span>
          <span v-else>0.00</span>
        </el-col>
        <el-col :span="5">
          <span
            v-if="shopdetailData.exchanged_order_money"
            class="info_amount info_detail_amount"
          >¥{{shopdetailData.exchanged_order_money}}</span>
          <span v-else>0.00</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <p
            v-if="shopdetailData.service_time_start && shopdetailData.service_time_end"
          >服务日期: {{shopdetailData.service_time_start}} ~ {{shopdetailData.service_time_end}}</p>
          <p
            v-if="shopdetailData.service_time_start && !shopdetailData.service_time_end"
          >服务日期: {{shopdetailData.service_time_start}} ~ ---</p>
          <p
            v-if="!shopdetailData.service_time_start && shopdetailData.service_time_end"
          >服务日期: ---~{{shopdetailData.service_time_end}}</p>
          <p v-if="!shopdetailData.service_time_start && !shopdetailData.service_time_end">服务日期: ---</p>
        </el-col>
        <el-col :span="4">
          <p v-if="shopdetailData.shop_area">店铺面积: {{shopdetailData.shop_area}}</p>
          <p v-else>店铺面积: ---</p>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick" class="shop_tab" id="shop_nav">
        <el-tab-pane label="商品记录" name="first"></el-tab-pane>
        <el-tab-pane label="爆品记录" name="second"></el-tab-pane>
        <el-tab-pane label="活动记录" name="third"></el-tab-pane>
        <el-tab-pane label="优惠券记录" name="fourth"></el-tab-pane>
        <el-tab-pane label="小店会员" name="fifth"></el-tab-pane>
        <el-tab-pane label="小店乐粉" name="sixth"></el-tab-pane>
        <el-tab-pane label="小店员工" name="seventh"></el-tab-pane>
        <el-tab-pane label="开卡记录" name="eightth"></el-tab-pane>
        <el-tab-pane label="资金流水" name="nineth"></el-tab-pane>
        <el-tab-pane label="红包使用记录" name="tenty"></el-tab-pane>
      </el-tabs>

      <goodsrecord v-if="activeName === 'first'" :shopId="shopId"></goodsrecord>
      <explusiverecord v-if="activeName === 'second'" :shopId="shopId"></explusiverecord>
      <activerecord v-if="activeName === 'third'" :shopId="shopId"></activerecord>
      <couponrecord v-if="activeName === 'fourth'" :shopId="shopId"></couponrecord>
      <memberlist v-if="activeName === 'fifth'" :shopId="shopId"></memberlist>
      <jingfanlist v-if="activeName === 'sixth'" :shopId="shopId"></jingfanlist>
      <bindcard v-if="activeName === 'eightth'" :shopId="shopId"></bindcard>
      <moneylist v-if="activeName === 'nineth'" :shopId="shopId"></moneylist>
      <redPacketrecord v-if="activeName === 'tenty'" :shopId="shopId"></redPacketrecord>

      <!--查看订单类型-->
      <jdialog title="请选择查看订单类型" :visible.sync="showOrderType" width="420px">
        <el-row class="orders">
          <el-col :span="12">
            <el-button
              class="goodsorder"
              type="primary"
              icon="el-icon-tickets"
              circle
              @click="gotoGoodsOrder"
            ></el-button>
            <p>商品订单</p>
          </el-col>

          <el-col :span="12">
            <el-button
              class="cashsorder"
              type="success"
              icon="el-icon-bank-card"
              circle
              @click="gotoCashsOrder"
            ></el-button>
            <p class>现金券订单</p>
          </el-col>
        </el-row>
      </jdialog>

      <!--绑定卡号段记录-->
      <!-- <jdialog title="卡号段绑定记录" :visible.sync="showcardRecord" width="720px">
       <el-table :data="tableData"
      style="width:100%"
      class="bindcardrecord"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='操作日期' prop='created_at'></el-table-column>
      <el-table-column label='绑定卡号段' >
        <template slot-scope="scope">
          {{scope.row.card_number_start}}-{{scope.row.card_number_end}}
        </template>
      </el-table-column>
      <el-table-column label='配卡数量' prop='quantity'></el-table-column>
      <el-table-column label='红包配额'>
        <template slot-scope="scope">
          ¥ {{scope.row.price}}
        </template>
      </el-table-column>
      </el-table>

      <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
      </jdialog>-->

      <!--红包充值记录-->
      <jdialog title="红包充值记录" :visible.sync="isShowPurseRecord" width="640px">

        <div class="recordPurse">
          <p>合计充值笔数: {{totalRecharge}}</p>
          <p>合计充值金额: ¥{{totalRechargeAmount}}</p>
          <p>当前红包余额: ¥{{currentPurseAmount}}</p>
        </div>
        <el-table
          :data="tableData"
          style="width:100%"
          class="bindcardrecord"
          max-height="600"
          :cell-style="tc"
          :header-cell-style="tccolor"
        >
          <el-table-column label="日期" prop="create_time"></el-table-column>
          <el-table-column label="充值红包金额">
            <template slot-scope="scope">¥{{scope.row.money_tlj}}</template>
          </el-table-column>
          <el-table-column label="充值来源">
            <template slot-scope="scope">
              <p v-if="scope.row.source_from == 55">后台充值</p>
              <p v-if="scope.row.source_from == 30">红包充值</p>
            </template>
          </el-table-column>
          <el-table-column label="支付金额">
            <template slot-scope="scope">
              <p v-if="scope.row.order">¥ {{scope.row.order.actual_amount}}</p>
              <p v-else>---</p>
            </template>
          </el-table-column>
        </el-table>

        <el-col :span="24">
          <div class="pagination">
            <el-pagination
              background
              @current-change="pageChange"
              :current-page="page"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>

      
      </jdialog>

      <el-dialog
      title="选择店铺样式" :visible.sync='isShowShopStyle' center width='36%'>
       <div class="style">
         <el-radio label="1" v-model="styleStatus">默认样式</el-radio>
         <span style="float:right;font-size:12px;">相册无轮播</span>
       </div>
       <div class="style">
         <el-radio label="2" v-model="styleStatus">样式1</el-radio>
         <span style="float:right;font-size:12px;">相册顶部轮播</span>
       </div>

       <div style="text-align:center;">
         <el-button size="mini" @click="isShowShopStyle = false">取消</el-button>
         <el-button size="mini" type="primary" @click="converseShopStyle">保存</el-button>
       </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import goodsrecord from "./goodsrecord";
import explusiverecord from "./explusiverecord";
import activerecord from "./activerecord";
import couponrecord from "./couponrecord";
import memberlist from "./memberlist";
import jingfanlist from "./jingfanlist";
import bindcard from "./bindcard";
import moneylist from "./moneylist";
import redPacketrecord from "./redPacketrecord"
import { shopDetailData, shopBindCardData,cardShopIdRechargeSearch,shopStyleSetting } from "@/api/shopdetail";

export default {
  data() {
    return {
      shopId: "",
      shopdetailData: {},
      page: 1,

      activeName: "first",
      showOrderType: false,
      showcardRecord: false,

      tableData: [],
      total: 0,
      //合计充值笔数
      totalRecharge:0,
      //合计充值金额
      totalRechargeAmount:0,
      //当前红包余额
      currentPurseAmount:0,
      loading: true,

      //红包充值记录
      isShowPurseRecord: false,

      //店铺样式
      isShowShopStyle:false,
      styleStatus:'1',
    };
  },
  computed: {},
  mounted() {
    this.shopId = this.$route.query.shopid;
    this.activeName = this.$route.query.activeName
    if(!this.activeName){
      this.activeName  = 'first'
    }
    //获取小店详细数据
    if (this.shopId) {
      this.getshopDetailData(this.shopId);
      this.getshopBindCardData(this.shopId);
    }
    document.getElementById("");
    //  window.addEventListener('scroll',this.handleScroll,true)
  },
  components: {
    goodsrecord,
    explusiverecord,
    activerecord,
    couponrecord,
    memberlist,
    jingfanlist,
    bindcard,
    moneylist,
    redPacketrecord
  },
  methods: {
    //获取详细数据
    async getshopDetailData(shopId) {
      let res = await shopDetailData(shopId);
      if (res.code === 10000) {
        this.shopdetailData = res.data;
        if(res.data.config){
          this.styleStatus = res.data.config.style
        }
        this.loading = false;
      } else {
        this.$message.error(res.message);
        this.loading = false;
      }
    },
    //获取绑定卡号段数据
    async getshopBindCardData(shopId) {
      let res = await shopBindCardData(shopId, "page=" + this.page + "");
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    handleClick() {},
    //跳转入驻消息详情页
    changeShopcategory() {
      this.$router.push("./residencemanagement");
    },
    //跳转商城订单
    gotoGoodsOrder() {
      this.showOrderType = false;
      this.$router.push({
        path: "../../operate/shoporder",
        query: { shop_id: this.shopId }
      });
    },
    //跳转现金券订单
    gotoCashsOrder() {
      this.showOrderType = false;
      this.$router.push({
        path: "../../operate/cashcouponorder",
        query: { shop_id: this.shopId }
      });
    },
    pageChange(page) {
      this.page = page;
      // this.getshopBindCardData(this.shopId)
    },
    //保存样式
    converseShopStyle(){
      this.getshopStyleSettingData()
    },
    async getshopStyleSettingData(){
      let res  = await shopStyleSetting(this.shopId,{shopId:this.shopId,type:this.styleStatus})
      if(res.code === 10000){
        this.$message.success(res.message)
        this.isShowShopStyle = false
      }else{
        this.$message.error(res.message)
      }
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    //悬停在顶部
    handleScroll(e) {
      // var  scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(e.scrollTop);
      var offsetTop = document.querySelector("#shop_nav").offsetTop;
      console.log(offsetTop);
    },
    
    showPurseRecordList(){
      this.getcardShopIdRechargeSearchData()
    },
    //获取红包充值记录
    async getcardShopIdRechargeSearchData(){
      let res = await cardShopIdRechargeSearch(this.shopId)
      if(res.code === 10000){
        this.isShowPurseRecord = true
        this.tableData = res.data.card_records_page.data
        this.total = res.data.card_records_page.total
        this.totalRecharge = res.data.card_records_page.total
        this.totalRechargeAmount = res.data.sum_tlj
        this.currentPurseAmount = res.data.balance_tlj
      }else{
        this.$message.error(res.message)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  height: 100%;
  overflow-y: scroll;
  // position: relative;
  // overflow: hidden;
}

.shop_info {
  padding: 20px;

  span {
    color: #999999;
    font-size: 16px;
    float: right;
    margin-left: 60px;
  }
  strong {
    font-weight: 400;
    color: #f4222d;
  }
  .shop_title {
    font-weight: 700;
    font-size: 21px;
  }

  .shop_btns {
    float: right;
  }

  .info_detail {
    margin: 10px 0;
  }

  .info_detail_amount {
    font-weight: 700;
    color: #333333;
  }

  .shop_tab {
    margin: 20px 0 10px;
  }
  .changeCategory {
    cursor: pointer;
  }
  .orders {
    margin: 36px 0px;
    text-align: center;
  }
  .goodsorder {
    // float: right;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
  }
  .cashsorder {
    // float: left;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
  }
  .bindcardrecord {
    padding: 15px 20px;
  }
  .pagination {
    float: right;
    margin: 15px 0;
  }
  .recordPurse{
    margin: 20px 20px;
     border: 1px solid #999999;
     height: 48px;
     p{
       float: left;
       width: 180px;
       margin-top: 12px;
       line-height: 24px;
       height: 24px;
       text-align: center;
     }
  }
  .style{
    border: 1px solid #999;
    height: 40px;
    padding: 8px 12px 16px 12px;
    margin-bottom: 16px;
  }
}
</style>

